<template>
  <view class="team-container">
    <!-- 团队数据概览 -->
    <!-- <view class="team-stats-section">
      <view class="stats-card">
        <view class="stats-row">
          <view class="stat-item">
            <text class="stat-value">{{teamStats.totalMembers}}</text>
            <text class="stat-label">团队总人数</text>
          </view>
          <view class="stat-divider"></view>
          <view class="stat-item">
            <text class="stat-value">{{teamStats.newMembers}}</text>
            <text class="stat-label">本月新增</text>
          </view>
          <view class="stat-divider"></view>
          <view class="stat-item">
            <text class="stat-value">¥{{teamStats.totalRevenue.toFixed(2)}}</text>
            <text class="stat-label">团队总收益</text>
          </view>
        </view>
      </view>
    </view> -->

    <!-- 团队成员列表 -->
    <view class="team-list-section">
      <view class="section-header">
        <text class="section-title">成员列表</text>
      </view>

      <view class="team-search">
        <view class="search-icon">
          <image src="/static/icons/search.png"></image>
        </view>
        <input
          type="text"
          v-model="keyword"
          placeholder="搜索成员"
          class="search-input"
          @blur="init()"
        />
        <view class="search-clear" v-if="keyword" @tap="clearSearch">
          <image src="/static/icons/close.png"></image>
        </view>
      </view>

      <!-- 成员列表 -->
      <scroll-view class="member-list" scroll-y @scrolltolower="getLists">
        <view v-if="lists.length === 0" class="empty-list">
          <image src="/static/images/empty-list.png"></image>
          <text>没有找到符合条件的成员</text>
        </view>

        <view
          class="member-item"
          v-for="(member, index) in lists"
          :key="'list-' + index"
        >
          <view class="member-info">
            <view class="member-avatar-wrapper">
              <image class="member-avatar" :src="member.avatarUrl"></image>
              <!-- <view class="member-level" :class="member.level">{{
                member.grade.name
              }}</view> -->
            </view>
            <view class="member-detail">
              <view class="member-name-row">
                <text class="list-member-name">{{ member.nickName }}</text>
                <text class="list-member-name list-member-level">{{
                  member.grade.name
                }}</text>
              </view>
              <view class="member-data">
                <text class="join-date"
                  >加入时间: {{ member.create_time }}</text
                >
                <text class="member-count" v-if="member.total_invite"
                  >团队: {{ member.total_invite }}人</text
                >
              </view>
            </view>
          </view>
          <!-- <view class="member-contribution">
            <text class="contribution-label">贡献收益</text>
            <text class="contribution-value">¥{{member.contribution.toFixed(2)}}</text>
          </view> -->
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { agentTeamApi } from "../../api/user";

export default {
  data() {
    return {
      // 搜索
      keyword: "",
      // 团队统计
      teamStats: {
        totalMembers: 28,
        newMembers: 3,
        totalRevenue: 1289.6,
      },
      // 所有团队成员
      lists: [],
      page: 1,
      page_size: 10,
      hasMore: "more",
    };
  },
  onLoad() {
    this.init();
  },
  methods: {
    // 返回上一页
    init() {
      this.lists = [];
      this.page = 1;
      this.hasMore = "more";
      this.getLists();
    },
    getLists() {
      if (this.hasMore != "more") {
        return;
      }
      this.more = "loading";
      agentTeamApi({
        keyword: this.keyword,
        page: this.page,
        page_size: this.page_size,
      }).then((res) => {
        if (res.last_page <= this.page) {
          this.hasMore = "noMore";
        } else {
          this.hasMore = "more";
        }
        this.lists = [...this.lists, ...res.data];
      });
      this.page++;
    },
    // 获取成员等级简称
    getLevelShortName(level) {
      // 会员等级
      const nameMap = {
        basic: "基",
        silver: "银",
        gold: "金",
        platinum: "铂",
      };

      return nameMap[level] || "基础";
    },

    // 清除搜索
    clearSearch() {
      this.keyword = "";
    },

    // 格式化日期
    formatDate(dateString) {
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();

      return `${year}-${month < 10 ? "0" + month : month}-${
        day < 10 ? "0" + day : day
      }`;
    },
  },
};
</script>

<style>
.team-container {
  background-color: #f8f6f1; /* 米白色背景 */
  min-height: 100vh;
  position: relative;
  padding-bottom: 120rpx;
}

/* 顶部导航 */
.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 30rpx;
  background-color: #ffffff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-btn image {
  width: 32rpx;
  height: 32rpx;
}

.page-title {
  font-size: 32rpx;
  color: #4d3f33;
  font-family: "汉仪尚巍手书", "思源宋体", sans-serif;
}

.placeholder {
  width: 60rpx;
}

/* 团队数据概览 */
.team-stats-section {
  margin: 30rpx;
}

.stats-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 30rpx;
}

.stats-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 36rpx;
  color: #4d3f33;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #a89b88;
}

.stat-divider {
  width: 1rpx;
  height: 60rpx;
  background-color: #eeeae0;
}

/* 团队成员列表 */
.team-list-section {
  margin: 30rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.section-header {
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 28rpx;
  color: #4d3f33;
  font-family: "汉仪尚巍手书", "思源宋体", sans-serif;
}

.team-search {
  display: flex;
  align-items: center;
  background-color: #f8f6f1;
  border-radius: 40rpx;
  padding: 15rpx 30rpx;
  margin: 30rpx 0;
}

.search-icon {
  margin-right: 20rpx;
}

.search-icon image {
  width: 32rpx;
  height: 32rpx;
}

.search-input {
  flex: 1;
  height: 60rpx;
  font-size: 28rpx;
  color: #4d3f33;
}

.search-clear {
  margin-left: 20rpx;
}

.search-clear image {
  width: 32rpx;
  height: 32rpx;
}

.member-list {
  height: calc(100vh - 300rpx);
}

.empty-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 0;
}

.empty-list image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-list text {
  font-size: 28rpx;
  color: #a89b88;
}

.member-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eeeae0;
}

.member-item:last-child {
  border-bottom: none;
}

.member-info {
  display: flex;
  align-items: center;
}

.member-avatar-wrapper {
  position: relative;
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
}

.member-avatar {
  width: 100%;
  height: 100%;
  border-radius: 40rpx;
  border: 2rpx solid #f8f6f1;
}

.member-level {
  position: absolute;
  right: -10rpx;
  bottom: -10rpx;
  width: 36rpx;
  height: 36rpx;
  border-radius: 18rpx;
  background-color: #bdb099;
  color: #ffffff;
  font-size: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-level.basic {
  background-color: #bdb099;
}

.member-level.silver {
  background-color: #c0c0c0;
}

.member-level.gold {
  background-color: #e2c675;
}

.member-level.platinum {
  background-color: #a5a9b4;
}

.member-detail {
  display: flex;
  flex-direction: column;
}

.member-name-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.list-member-name {
  font-size: 28rpx;
  color: #4d3f33;
  margin-right: 20rpx;
}
.list-member-level {
  background-color: #bdb099;
  color: #ffffff;
  font-size: 20rpx;
  padding: 4rpx 10rpx;
  border-radius: 10rpx;
}
.member-data {
  display: flex;
  font-size: 24rpx;
  color: #a89b88;
}

.join-date {
  margin-right: 30rpx;
}

.member-contribution {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.contribution-label {
  font-size: 24rpx;
  color: #a89b88;
  margin-bottom: 10rpx;
}

.contribution-value {
  font-size: 32rpx;
  color: #78a77f;
  font-weight: bold;
}

/* 邀请按钮 */
.invite-button {
  position: fixed;
  right: 30rpx;
  bottom: 60rpx;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #78a77f, #6b9473);
  padding: 20rpx 40rpx;
  border-radius: 40rpx;
  box-shadow: 0 10rpx 20rpx rgba(120, 167, 127, 0.3);
}

.invite-button image {
  width: 36rpx;
  height: 36rpx;
  margin-right: 10rpx;
}

.invite-button text {
  font-size: 28rpx;
  color: #ffffff;
}

/* 邀请弹窗 */
.invite-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.invite-modal-content {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-radius: 30rpx 30rpx 0 0;
  padding-bottom: 60rpx;
  z-index: 101;
}

.invite-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #eeeae0;
}

.invite-modal-title {
  font-size: 32rpx;
  color: #4d3f33;
  font-family: "汉仪尚巍手书", "思源宋体", sans-serif;
}

.invite-modal-close {
  font-size: 40rpx;
  color: #a89b88;
  padding: 0 20rpx;
}

.invite-methods {
  display: flex;
  justify-content: space-around;
  padding: 60rpx 30rpx;
}

.invite-method {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.invite-method image {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 20rpx;
}

.invite-method text {
  font-size: 28rpx;
  color: #4d3f33;
}
</style>
